<template>
	<view class="fullPage">
		<view class="container plr30 pt20">
			<view class="header_w h300 mb70 b-primary border-r1">
				<view class="header_img">
					<image src="/static/bg_wdqb.png" mode="widthFix" style="width: 100%;"></image>
				</view>
				<view class="pos_r flex_aj column pw100 ph100 cf">
					<view class="h60 ft36">{{ (list.balance + list.giveMoney).toFixed(2) }}</view>
					<view class="">账户总余额(元）</view>
				</view>
			</view>
			<view class="plr30 bf border-r1">
				<view class="flex_sb h90 bdb">
					<text>余额</text>
					<text>{{ list.balance.toFixed(2) }}元</text>
				</view>
				<view class="flex_sb h90 bdb">
					<text>赠送金额</text>
					<text>{{ list.giveMoney.toFixed(2) }}元</text>
				</view>

				<view class="flex ptb20" v-if="!isMany">
					<view class="flex1 flex_a">
						<text class="whn" v-for="(item,index) in info"
							:key="item.userId">{{item.agentName|| '--'}}</text>
						<view class="plr20"
							@click="routerLink({ path: '/pages/user/service/detail', query: { type: 1 } })">
							<u-icon name="question-circle" color="#999" size="30"></u-icon>
						</view>
					</view>
					<view class="tae primary"><text
							@click="routerLink({ path: '/pages/user/wallet/depositDetail' })">我的押金</text></view>
					<!-- <view class="ft26">
						<text v-show="info.deposit_status == 1">
							<text class="c6">电池押金({{ info.type_name }}V)：</text>
							{{ list.deposit.toFixed(2) }}元
						</text>
						<text class="pl20" v-show="info.car_deposit_status == 1">
							<text class="c6">车辆押金：</text>
							{{ list.carDeposit.toFixed(2) }}元
						</text>
						<text v-show="info.deposit_status == 0 && info.car_deposit_status == 0">--</text>
					</view>
				</view> -->
					<!-- <view class="pb30 tae primary"><text
						@click="routerLink({ path: '/pages/user/wallet/depositDetail' })">我的押金</text></view> -->
				</view>
			</view>

			<view class="titiess" v-if="isMany">
				<view>
					钱包具体明细：
				</view>

				<view class=" tae primary wenhao">
					<view class="plr10" @click="routerLink({ path: '/pages/user/service/detail', query: { type: 1 } })">
						<u-icon name="question-circle" color="#999" size="30"></u-icon>
					</view>
					<text @click="routerLink({ path: '/pages/user/wallet/depositDetail' })">我的押金</text>
				</view>
			</view>
			<!-- <view class="trs bg-ws">
			<view class="th th1">代理商</view>
			<view class="th th2">余额</view>
			<view class="th th4">赠送金额</view>
			<view class="th ">电池押金</view>
			<view class="th th3">车辆押金</view>
		</view> -->
			<view class="table" v-if="isMany">
				<view class="tr bg-w">
					<view class="th th1">商户名称</view>
					<view class="th th2">余额</view>
					<view class="th th4">赠送金额</view>
					<view class="th ">电池押金</view>
					<view class="th th3">车辆押金</view>
				</view>
				<block v-for="(item,index) in info" :key="item.userId" class="">
					<!-- //v-if="index % 2 == 0" -->
					<view class="blockss">
						<view class="tr bg-g">
							<view class="td td1">{{item.agentName}}</view>
							<view class="td">{{item.balance}}</view>
							<view class="td">{{item.giveMoney}}</view>
							<view class="td">{{item.deposit}}</view>
							<view class="td">{{item.carDeposit}}</view>
						</view>
						<!-- <view class="tr" v-else>
					<view class="td">{{item.code}}</view>
					<view class="td">{{item.text}}</view>
					<view class="td">{{item.type}}</view>
				</view> -->
					</view>

				</block>
			</view>
			<view v-if="isMany" class="commercialTenantFooterText">
				上下滑动查看商户
			</view>


			<view class="" v-if="cashArr.length !== 0">
				<view class="chargeBond">代金券</view>
				<view class=" mb30 plr24 border-r1 bf shadow" style="padding-top: 20upx;">
					<view class="" style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
						<view v-for="item in cashArr" :key="item.id" style="width: 33%;">
							<view class="flex_a h90 mb20 ft26" @click="cashBond(item)">
								<view class="flex_aj  ph100 mr24 border-r1"
									style="display: flex;flex-wrap: wrap;justify-content: center;flex-direction: column;align-items: center;min-width: 150upx;"
									:class="cashId == item.id ? 'bd-primary primary' : 'bd'">
									<text style="font-size: 38upx;color:green">{{ item.discount }}元</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<u-modal v-model="cashShow" title="代金券使用" :title-style="{color: 'red'}" :content="cashContent"
					:mask-close-able="true" :zoom="true" :show-cancel-button="true" @confirm="cashConfirm">
				</u-modal>
			</view>
			<view class="mb100 plr100 isManys">
				<view class="mb30">
					<u-button type="primary" shape="circle" @click="RechargeImmediately">
						立即充值</u-button>
				</view>
				<u-button type="primary" plain shape="circle"
					@click="routerLink({ path: '/pages/user/wallet/balanceDetail' })">账户明细</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBalance,
		couponGetUserCoupon,
		couponCashCoupon
	} from '@/api/user.js'
	export default {
		name: 'wallet',
		data() {
			return {
				isMany: false, //控制多个代理商显示的变量
				info: [],
				list: {
					balance: 0, //余额
					giveMoney: 0, //赠送金额
					deposit: 0, //电池押金
					carDeposit: 0, //车辆押金
				},
				cashArr: [],
				cashId: '', // 选中的优惠券id
				cashShow: false,
				cashContent: '',
				agentId: '',
			}
		},
		onLoad(e) {
			console.log('这是什么啊', e);
			if (e.cash) {
				this.cashContent = '你确定要使用代金券--' + e.cash + '元？'
				this.cashShow = true;
				this.cashId = e.couponId
				this.agentId = e.agentId
			}

		},
		onShow() {
			this.isMany = false
			this.getBalance()
			setTimeout((item) => {
				console.log('1254458877');
				if (this.info.length <= 1) {
					this.isMany = false
					console.log('1111++++++++++++++++++++');
				}
				if (this.info.length > 1) {
					// this.isMany = true
					console.log('222++++++++++++++++++++');
				}
			}, 1000)
			this.agentId = wx.getStorageSync('oneData').agentId || ''
			this.cashFn()
		},
		methods: {
			// 立刻充值
			async RechargeImmediately() {
				console.log('2222', this.info);
				if (!this.agentId) {
					return this.toast('请先扫设备二维码再充值')
				}
				if (this.info[0].depositStatus !== 1) {
					return this.toast('请先交付电池押金再充值')
				}

				await this.routerLink({
					path: '/pages/user/wallet/recharge'
				})

			},
			// 选择代金券
			cashBond(e) {
				console.log('d点击了', e);
				this.cashContent = '你确定要使用代金券--' + e.discount + '元？'
				this.cashShow = true;
				this.cashId = e.id
			},
			async cashConfirm() {
				// 使用现金劵
				const res = await couponCashCoupon({
					couponUserId: this.cashId || '',
					agentId: this.agentId,
				})
				this.toast(res.code == 200 ? '使用成功' : res.msg)
				setTimeout(async () => {
					await this.getBalance()
					await this.cashFn()
				}, 1200)

				if (res.code == 200) {
					setTimeout(async () => {
						uni.navigateBack({
							delta: 1,
						})
					}, 1500)
				}

			},
			// 拿到用户领取的代金券
			async cashFn() {
				const ress = await couponGetUserCoupon({
					couponType: '2',
					agentId: wx.getStorageSync('oneData').agentId || ''
				})
				this.cashArr = ress.data || []
				console.log('优惠券=====', this.cashArr);
			},
			async getBalance() {
				const res = await getBalance()
				this.info = res.data || []
				console.log('+++++++++', this.info);
				this.list.balance = 0
				this.list.giveMoney = 0
				this.list.deposit = 0
				this.list.carDeposit = 0
				this.info.forEach((item) => {
					this.list.balance += item.balance
					this.list.giveMoney += item.giveMoney
					this.list.deposit += item.deposit
					this.list.carDeposit += item.carDeposit
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header_w {
		position: relative;

		.header_img {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
			height: 300upx;
			width: 100%;
		}
	}

	.table {
		border: 0px solid darkgray;
		position: relative;
		top: 2%;
		left: 0px;
		right: 20px;
		height: 200px;
		overflow-y: scroll;


	}

	.tr {
		display: flex;
		width: 100%;
		justify-content: center;
		height: 3rem;
		align-items: center;
	}

	.td {
		width: 40%;
		justify-content: center;
		text-align: center;
	}

	.trs {
		display: flex;
		width: 100%;
		justify-content: center;
		height: 3rem;
		align-items: center;
	}

	.bg-ws {
		// background: snow;
		display: flex;
		justify-content: space-around;
		background: #3282ff;
		// border: 1px solid #565656;
		position: fixed;
		top: 335px;
		// right: 10px;
		// left: 10px;
	}

	.bg-w {
		// background: snow;
		display: flex;
		justify-content: space-around;
		background: #3282ff;
		// border: 1px solid #565656;
		// position: fixed;
		// right: 0px;
		// left: 0px;



	}

	.bg-g {
		background: #E6F3F9;


	}

	.blockss {
		// position: fixed;
		// // right: 0px;
		// // left: 0px;
		// margin-top: 50px;
	}

	.th {
		// width: 20%;
		// border: 1px solid #565656;
		justify-content: center;
		background: #3282ff;
		color: #fff;
		display: flex;
		height: 100%;
		align-items: center;
		font-size: 12px;
	}

	.th1 {
		margin-left: 4px;
	}

	.th2 {
		margin-left: 13px;
	}

	.th3 {
		// margin-right: 14px;
	}

	.th4 {
		margin-left: 12px;
	}

	.td1 {
		font-size: 12px;

	}

	.titiess {
		margin-top: 18px;
		color: #888;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.wenhao {
		display: flex;
		justify-content: flex-start;
	}

	.isManys {
		margin-top: 50px
	}

	.commercialTenantFooterText {
		text-align: center;
		margin-top: 13px;
		color: #bbb;
	}

	.chargeBond {
		font-size: 28upx;
		padding-bottom: 20upx;
		margin-top: 20upx;
	}
</style>